<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleSave"
          >保存</el-button
        >
      </el-col> -->
    </el-row>
    <div>
      <el-form
        :model="data"
        ref="factoryDoorForm"
        class="data-form"
        :row-key="id"
      >
        <el-table
          v-loading="loading"
          border
          :data="data.coefficientList"
          :header-cell-class-name="must"
        >
          <el-table-column
            label="序号"
            width="60"
            type="index"
            align="center"
          />
          <el-table-column
            label="机台"
            min-width="160"
            align="center"
            prop="machineName"
          >
            <template #default="scope">
              <el-select
                v-model="scope.row.machineId"
                @change="changeMachine(scope.row)"
              >
                <el-option
                  v-for="item in workshopList"
                  :key="item"
                  :label="item.machineName"
                  :value="item.machineId"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column label="类型" align="center" prop="type">
            <template v-slot="{ row }">
              {{ row.type == 1 ? "封面" : "内文" }}
            </template>
          </el-table-column>
          <el-table-column label="品种" align="center" prop="breed">
          </el-table-column>
          <el-table-column label="印色" align="center" prop="printColor">
            <template #default="scope">
              <span
                v-for="(item, index) in scope.row.printColor?.split(',')"
                :key="index"
              >
                <dict-tag :options="ems_order_print_color" :value="item" />
              </span>
            </template>
          </el-table-column>
          <el-table-column label="颜色" align="center" prop="weight">
            <template #default="scope">
              {{
                scope.$index == 0
                  ? " "
                  : scope.$index == 3
                  ? "蓝黑以外的"
                  : "蓝黑"
              }}
            </template>
          </el-table-column>
          <!-- <el-table-column
            label="操作"
            align="center"
            fixed="right"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-tooltip content="修改" placement="top" v-if="scope.row.id">
                <el-button
                  link
                  type="primary"
                  icon="Edit"
                  @click="handleUpdate(scope.row, scope.$index)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column> -->
        </el-table>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { selectRotate, updateRotate } from "@/api/basicInfo/setting";
import { getToken } from "@/utils/auth";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const total = ref(0);
const factoryDoorForm = ref(null);
const { ems_workshop, ems_order_print_color } = proxy.useDict(
  "ems_workshop",
  "ems_order_print_color"
);
const workshopList = ref([
  {
    machineId: "5bfd2e94fa6d44b3bc4ff2ce4287346b",
    machineName: "平板双色（1030）4号机",
  },
  {
    machineId: "e871014ac4054f2888e089d05ae9c36a",
    machineName: "平板双色（1030）3号机",
  },
  {
    machineId: "39ad48d4a280400b8abe6fd9054d5421",
    machineName: "平板双色（1030）6号机",
  },
  {
    machineId: "36644751392845bf83e641da597d0b8c",
    machineName: "平板双色（1030）5号机",
  },
]);
const selectCarTypes = ref([]);
const changeMachine = (row) => {
  row.machineName = workshopList.value.find(
    (item) => item.machineId == row.machineId
  ).machineName;
  updateRotate({ ...row }).then((res) => {
    ElMessage({
      message: "修改成功",
      type: "success",
    });
    getList();
  });
};
const must = (obj) => {
  let mustColumns = [1];
  if (mustColumns.includes(obj.columnIndex)) {
    return "must";
  }
};

const data = reactive({
  coefficientList: [],
  queryParams: {
    pageNum: 1,
    pageSize: 100,
  },
});
const { queryParams, coefficientList, rules } = toRefs(data);

const getList = () => {
  loading.value = true;
  selectRotate(queryParams.value)
    .then((res) => {
      loading.value = false;
      coefficientList.value = res.data;
      total.value = res.total;
    })
    .catch((err) => {
      loading.value = false;
    });
};

// 新增
const handleAdd = () => {
  coefficientList.value.unshift({
    state: "1", //修改状态 1:新增 2:修改 3:删除
    edit: true,
  });
  //新增行可编辑
  data.coefficientList[0].edit = false;
};

const handleSave = async () => {
  try {
    await updateRotate(coefficientList.value);
    ElMessage({
      message: "编辑成功",
      type: "success",
    });
    getList();
  } catch (error) {}
};

// 编辑
const handleUpdate = (row, index) => {
  coefficientList.value[index].state = "2";
  coefficientList.value[index].edit = false;
};

// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm("queryRef");
  handleQuery();
};

getList();
</script>

<style lang="scss" scoped>
.footer {
  text-align: center;
}

:deep(.el-pagination) {
  position: unset;
}

.order-form :deep(.el-form-item) {
  margin-bottom: 0px;
}

:deep(.el-table th.must div:before) {
  content: "*";
  color: #ff1818;
}

:deep(.el-table) .success-row {
  background: #dae5f4 !important;
}
.el-form-item {
  margin-bottom: 0;
}
:deep(.el-form-item__content) {
  display: flex;
  justify-content: center;
}
</style>
